<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>

<script lang="ts">
  import { defineComponent, PropType, Ref, ref, watchEffect } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import * as MathUtil from '/@/utils/MathUtil';

  const COLOR_RED = '#F53F3F';
  const COLOR_PURPLE = '#212A7C';
  const COLOR_GRAY = '#D3CEE2';
  export default defineComponent({
    name: 'CirclePointImg',
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '200px',
      },
      dataList: {
        type: Array as PropType<{ name: string; value: number; color: string }[]>,
        required: true,
      },
      centerPoint: {
        type: Array as unknown as PropType<[string, string]>,
        default: () => ['50%', '50%'],
      },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

      const getOption = () => {
        const circle1R = 80;
        return {
          responsive: true,
          graphic: [
            {
              type: 'group',
              left: 'center',
              top: 'center',
              children: [
                {
                  type: 'group',
                  children: [
                    {
                      type: 'circle',
                      shape: {
                        r: circle1R,
                      },
                      style: {
                        fill: COLOR_PURPLE || props.dataList[0].color,
                      },
                    },
                    {
                      type: 'text',
                      style: {
                        text: props.dataList[0].value,
                        fontSize: 30,
                        fontWeight: 600,
                        fill: props.dataList[0].textColor || 'white',
                        textAlign: 'center',
                        textBaseline: 'middle',
                      },
                    },
                    {
                      type: 'text',
                      top: 40,
                      style: {
                        text: props.dataList[0].remark,
                        fontSize: 20,
                        fontWeight: 600,
                        fill: props.dataList[0].textColor || 'white',
                        textAlign: 'center',
                        textBaseline: 'middle',
                      },
                    },
                  ],
                },
                {
                  type: 'group',
                  left: 45,
                  bottom: 5,
                  children: [
                    {
                      type: 'circle',
                      shape: {
                        r: 40,
                      },
                      style: {
                        fill: COLOR_GRAY || props.dataList[1].color,
                        stroke: props.dataList[1].value.startsWith('-') ? COLOR_RED : 'transparent',
                        lineWidth: props.dataList[1].value.startsWith('-') ? 2 : 0,
                      },
                    },
                    {
                      type: 'text',
                      top: -10,
                      style: {
                        text: props.dataList[1].value,
                        fontSize: 18,
                        fontWeight: 600,
                        fill: props.dataList[1].textColor || COLOR_PURPLE,
                        textAlign: 'center',
                        textBaseline: 'middle',
                      },
                    },
                  ],
                },
              ],
            },
          ],
        };
      };

      watchEffect(() => {
        if (props.dataList.length > 0) {
          setOptions(getOption());
        }
      });

      return { chartRef };
    },
  });
</script>
